<template>
  <div class="releaseBidding">
    <el-card shadow="never" style="margin-top: 30px">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="发布招标" style="margin-bottom: 20px">
          </el-page-header>
        </div>
      </div>

      <div class="biddingForm">
        <el-form :model="tenderForm" :rules="rules" ref="tenderForm" label-width="120px" class="demo-ruleForm" size="mini">
          <el-form-item label="招标标题" prop="tenderTitle">
            <el-input v-model="tenderForm.tenderTitle"></el-input>
          </el-form-item>
          <el-form-item label="招标内容" prop="tenderContent">
<!--            <el-input type="textarea"
                      v-model="tenderForm.tenderContent"
                      :rows="10">
            </el-input>-->
            <div style="border: 1px solid #ccc;">
              <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editor"
                  :defaultConfig="toolbarConfig"
                  :mode="mode"
              />
              <Editor
                  style="height: 400px; overflow-y: hidden;"
                  v-model="tenderForm.tenderContent"
                  :defaultConfig="editorConfig"
                  :mode="mode"
                  @onChange="onChange"
                  @onCreated="onCreated"
              />
            </div>
          </el-form-item>
          <el-form-item label="招标开始时间" prop="tenderStarttime">
            <el-date-picker
                v-model="tenderForm.tenderStarttime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="招标结束时间" prop="tenderEndtime">
            <el-date-picker
                v-model="tenderForm.tenderEndtime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('tenderForm')">立即创建</el-button>
            <el-button @click="resetForm('tenderForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-card>
  </div>
</template>

<script>
import {addTender, uploadImage} from "@/api/allApi";
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";

export default {
  name: "ReleaseBidding",
  components: {Editor, Toolbar},
  data() {

    // form表单自定义验证规则，开始时间不可大于结束时间
    var endTimeRules = (rule, value, callback) => {
      if(this.tenderForm.tenderStarttime > this.tenderForm.tenderEndtime){
        callback(new Error('开始时间不能在截止时间之前'));
      }else {
        callback();
      }
    }

    return{
      admin:'',
      tenderForm:{
        tenderTitle:'',
        tenderContent:'',
        tenderStarttime:'',
        tenderEndtime:'',
      },
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          //配置上传图片
          uploadImage: {
            customUpload: this.uploadImg,
          },
        }
      },
      mode: 'simple', // or 'default'
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      rules: {
        tenderTitle: [
          { required: true, message: '请输入投标标题', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
        ],
        tenderContent: [
          { required: true, message: '请填写投标内容', trigger: 'change' }
        ],
        tenderStarttime: [
          { required: true, message: '请选择开始日期', trigger: 'change' },
        ],
        tenderEndtime: [
          {required: true, message: '请选择截止日期', trigger: 'change' },
          {required: true, validator: endTimeRules, trigger: 'change' }
        ],

      }
    }
  },
  created() {
    this.admin = JSON.parse(window.localStorage.getItem('access-admin'))
  },
  methods:{
    goBack() {
      this.$router.back();
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.toolbarConfig.excludeKeys = [
        'group-video'
      ]
    },
    //上传图片
    uploadImg(file, insertFn) {
      //调接口，上传图片
      uploadImage({file: file}).then(res => {
        if (res.data.errno === 0) {
          insertFn(res.data.data.url);
          this.$message.success("上传成功")
        }
        else {
          this.$message.error("上传失败")
        }
      })
    },
    onChange () {
    },
    addTender() {
      this.tenderForm.adminId= this.admin.adminId
      // 获取不带html标签的纯文本，存入数据库作为摘要
      this.tenderForm.tenderDigest = this.editor.getText()
      addTender(this.tenderForm).then(res=>{
        if (res.data.success){
          this.$message.success("发布成功！")
        }else {
          this.$message.error("出错啦！")
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addTender()
        } else {
          this.$message.error("请按要求发布！")
          return false;
        }
      });
      this.$refs[formName].resetFields();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();

    },
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style lang="less" scoped>
  .biddingForm {
    width: 100%;
    padding: 30px;

  }
</style>